<script setup>
  import { ref } from "vue";
  // <!-- 导入api.vue文件 -->
  // import Apivue from './Api.vue';
  // //导入Article.vue函数
  // import Articlevue from "./Article.vue";
  import { getAll,search } from "./api/article";

//获取全部文章
  const articleList = ref([]);
  const getAllarticle = async function () {
    articleList.value = await getAll();
  }
  getAllarticle();

  //根据条件搜索文章
  const searchCondition = ref({
    category : '',
    state : ''
  })
  //等待click事件触发
  const searchInCondition = async function(){
    articleList.value = await search({...searchCondition.value});
  }
  
</script>

<template>

  <div>
    文章分类：<input type="text" v-model="searchCondition.category"/>
    文章状态：<input type="text" v-model="searchCondition.state"/>
    <!-- 如果搜索的字符中带了空格和制表符，换行符的消去功能 -->
    <button @click="searchInCondition">搜索</button>

    <br/>
    <br/>

    <table border="1 solid" colspa="0" cellspacing="0">
      <tbody>
        <tr>
          <th>文章标题</th>
          <th>分类</th>
          <th>发表时间</th>
          <th>状态</th>
          <th>操作</th>
      </tr>
        <tr v-for="(a,index) in articleList">
          <td>{{a.title}}</td>
          <td>{{a.category}}</td>
          <td>{{a.time}}</td>
          <td>{{a.state}}</td>
          <td>
            <button>编辑</button>
            <button>删除</button>
          </td>
      </tr>
      </tbody>
      <!-- v-for多次重复 -->
      </table>
  </div>


  <!-- <Apivue/>
  <Articlevue/> -->

</template>

<!-- 这个vue文件和html差不多是一样的，里面原本就是html类似的 vue会自动找标签进行使用
 .vue文件是叫做单文件组件SFC-->
<style scoped>
.class1{
  text-align: right;
  background-color: blue;
  font-size: xx-large;
}
</style>
